<template>
    <div>
        <el-dialog title="新增" :visible.sync="dialog_info_flag" @opened="openDialog" @close="close" :beforeClose="before_close" width="530px">
            <el-form :model="form" ref="addInfoForm">
                <el-form-item label="类别" :label-width="formLabelWidth" prop="category">
                    <el-select v-model="form.category" placeholder="请选择活动区域">
                        <el-option 
                            :label="title_items.category_name" 
                            v-for="title_items in options_category.item" 
                            :key="title_items.id"
                            :value="title_items.id" >
                        </el-option>
                        <!-- <el-option label="区域二" value="beijing"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="概况" :label-width="formLabelWidth" prop="content">
                    <el-input type="textarea" v-model="form.content" placeholder="请输入内容" style="height:100px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="submit_addInfo" :loading="submit_addInfo_loading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { reactive ,ref, watch } from '@vue/composition-api';
import { AddInfo } from '../../../api/news';
export default {
  name: "dialogInfo",
  props:{
    flag: {
        type: Boolean,
        default: false
    },
    category:{
        type: Array,
        default: (()=>{

        })
    }
  },
  //vue3.0
  setup(props, { emit,root, refs }) {
    const dialog_info_flag = ref(false);
    const formLabelWidth = ref('40px');
    const form = reactive({
        category: '',
        title: '',
        content: ''
    });
    const resetForm = (()=>{
        form.category = '',
        form.title = '',
        form.content = ''
    })
    const options_category = reactive({
        item:[]
    })
    const close = () => {
        dialog_info_flag.value=false;
        resetForm();
        console.log(111111)
        emit("update:flag",false);
        //'close' 即回调父组件的close属性
        // this.$emit('close',false);
    }
    const before_close = ((done)=>{
        root.$confirm('确认关闭？').then(_ => {
            done();
        }).catch(_ => {});
    })
    const openDialog = (()=>{
        console.log('openDialog', '')
        // form.category = props.category
        //保存到变量数组中
        options_category.item = props.category;
        console.log(options_category.item)
    })
    watch(()=> {
        dialog_info_flag.value = props.flag;
        // console.log('dialog_info_flag', '')
        // console.log(props)
    })
    const submit_addInfo_loading = ref(false)
    const submit_addInfo = (()=>{
        console.log('AddInfo1', '')
        let requestData = {
            categoryId: form.category,//categoryId才可成功，根据接口要求，category显示标题和内容都是错误的
            title: form.title,
            content: form.content,
        }
        submit_addInfo_loading.value = true;
        console.log(requestData)
        if(!form.category){
            root.$message({
                message: '标题、类型不能为空！!',
                type: 'error'
            })
            return false  //不跑接口提示信息
        }
        AddInfo(requestData).then(response => {
            console.log('success', '')
            // console.log(response)
            let responseData = response.data
            root.$message({
                message: responseData.message,
                type: 'success'
            })
            submit_addInfo_loading.value = false
            // resetFields对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            // root.$refs['addInfoForm'].resetFields();
            //重置表单有两种方法
            resetForm()
        }).catch(error => {
            submit_addInfo_loading.value = false
        })
    })
    return{
        dialog_info_flag,formLabelWidth,form,close,before_close,openDialog,
        options_category,submit_addInfo,submit_addInfo_loading,
        resetForm,
        }
    }
    //vue2.0
    // data() {
    //   return {
    //   }
    // },
    // vue2.0
    // methods: {
    //   close() {
    //     this.dialog_info_flag=false
    //     console.log(111)
    //     this.$emit("update:flag",false);
    //     //'close' 即回调父组件的close属性
    //     // this.$emit('close',false);
    //   },
    // },
    //单向数据流，父级 -> 子级

    // watch: {
    //   flag:{
    //     handler(newValue, oldValue) {
    //       this.dialog_info_flag = newValue;
    //     },
    //   }
    // },

}
</script>

<style>
.el-textarea__inner {
    height: 100px;
}
</style>